<nz-spin [nzSpinning]="isSpinning" nzTip="{{'processing' | translate}}">
  <div class="panel-index-cont" style="padding: 10px;overflow-y:auto;">
    <div class="panel-index">
      <div class="hd" style="padding-bottom: 5px;border-bottom: 8px solid #D1D3DA;">
        <span style="padding-right:15px;">
          {{'dev_type' | translate}}:&nbsp;
          <span class="wt_600">{{LoginForm['type']}}</span>
        </span>
        <a (click)="exit()" class="cm-right">{{'sign_out' | translate}}</a>
      </div>
      <div class="bd container">
        <div class="aside_left" style="width: 30%;flex: none;text-align: center;height: 80vh;min-height: 550px;">
          <div class="chart_container">
            <div class="alarmCircleContainer">
              <div class="alarmCircle" [ngStyle]="{'background-color': alarmCircleColor}"></div>
            </div>
            <div style="height: calc(100% - 91px);padding-top: 30px;">
              <div style="padding: 5px;display: inline-flex;">
                <div style="margin: 2px 20px 0 0;">{{'signal_lamp' | translate}}</div>
                <nz-switch nzCheckedChildren="{{'running' | translate}}" nzUnCheckedChildren="{{'stoping' | translate}}"
                  [(ngModel)]="isLampShow" (ngModelChange)="lampShowChange()"></nz-switch>
              </div>
              <div class="lampRectangle"
                [ngStyle]="{'background-color': isLampShow && lampCount >= 8 ? 'red' : 'lightGray'}"></div>
              <div class="lampRectangle"
                [ngStyle]="{'background-color': isLampShow && lampCount >= 7 ? 'red' : 'lightGray'}"></div>
              <div class="lampRectangle"
                [ngStyle]="{'background-color': isLampShow && lampCount >= 6 ? 'IndianRed' : 'lightGray'}"></div>
              <div class="lampRectangle"
                [ngStyle]="{'background-color': isLampShow && lampCount >= 5 ? 'IndianRed' : 'lightGray'}"></div>
              <div class="lampRectangle"
                [ngStyle]="{'background-color': isLampShow && lampCount >= 4 ? 'Gold' : 'lightGray'}"></div>
              <div class="lampRectangle"
                [ngStyle]="{'background-color': isLampShow && lampCount >= 3 ? 'Gold' : 'lightGray'}"></div>
              <div class="lampRectangle"
                [ngStyle]="{'background-color': isLampShow && lampCount >= 2 ? 'Lime' : 'lightGray'}"></div>
              <div class="lampRectangle"
                [ngStyle]="{'background-color': isLampShow && lampCount >= 1 ? 'Lime' : 'lightGray'}"></div>
            </div>
          </div>
        </div>
        <div class="aside_right">
          <div class="right_one" style="height: 80%;">
            <div class="one_content">
              <div *ngFor="let cmd  of optionCmdList" class="content_ele" nz-row>
                <label nz-col nzSpan="4">{{cmd.title}}</label>
                <span nz-col nzSpan="11">
                  <nz-radio-group *ngIf="cmd.value==='01'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of modulationFreqList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                  <nz-radio-group *ngIf="cmd.value==='02'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of centerFreqList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                  <nz-radio-group *ngIf="cmd.value==='03'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of bandWidthList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                  <nz-radio-group *ngIf="cmd.value==='04'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of antiNoiseList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                  <nz-radio-group *ngIf="cmd.value==='05'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of rxSoundList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                  <nz-radio-group *ngIf="cmd.value==='06'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of rxVolumeList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                  <nz-radio-group *ngIf="cmd.value==='08'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of preAlertList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                  <nz-radio-group *ngIf="cmd.value==='0b'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of txSoundList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                  <nz-radio-group *ngIf="cmd.value==='0c'" [nzDisabled]="state" [(ngModel)]="currentOptions[cmd.value]"
                    (ngModelChange)="sendOrder(1, cmd.value , $event)">
                    <label nz-radio-button *ngFor="let item of txVolumeList" [nzValue]="item.value"
                      class="radioOption">{{item.title}}</label>
                  </nz-radio-group>
                </span>
              </div>
              <div class="content_ele" nz-row>
                <label nz-col nzSpan="4">{{alarmTimesTitle | translate}}</label>
                <span nz-col nzSpan="11">
                  <span nz-col nzSpan="2">0</span>
                  <nz-progress [nzPercent]="currentOptions['0a']/255*100" [nzFormat]="formatOne" nz-col nzSpan="9">
                  </nz-progress>
                  <span nz-col nzSpan="3">255</span>
                  <nz-input-number [nzDisabled]="true" nzSpan="4" nz-col [nzMin]="0" [nzMax]="255"
                    [(ngModel)]="currentOptions['0a']"></nz-input-number>
                  <button style="margin-left: 10px;height: 25px;width: 80px;" nzSpan="4" nz-button nzType="primary"
                    (click)="sendOrder(1, '0a', 0)">{{'clear' | translate}}</button>
                </span>
              </div>
              <div class="content_ele" nz-row>
                <label nz-col nzSpan="4">{{'sensitivity' | translate}}</label>
                <span nz-col nzSpan="11">
                  <button style="margin-left: 5px;height: 25px;padding: 0 8px;width: 40px;" nzSpan="4" nz-button
                    nzType="primary" (click)="sendOrder(1, '0f', '')">{{'-' | translate}}</button>
                  <button style="margin-left: 5px;height: 25px;padding: 0 8px;width: 40px;" nzSpan="4" nz-button
                    nzType="primary" (click)="sendOrder(1, '0e', '')">{{'+' | translate}}</button>
                </span>
              </div>
              <div class="content_ele" nz-row>
                <label nz-col nzSpan="4">{{'adjust' | translate}}</label>
                <span nz-col nzSpan="4">
                  <button style="margin-left: 5px;height: 25px;padding: 0 8px;width: 40px;" nzSpan="4" nz-button
                    nzType="primary" (click)="sendOrder(1, '13', '')">{{'-' | translate}}</button>
                  <button style="margin-left: 5px;height: 25px;padding: 0 8px;width: 40px;" nzSpan="4" nz-button
                    nzType="primary" (click)="sendOrder(1, '12', '')">{{'+' | translate}}</button>
                </span>
              </div>
            </div>
          </div>
          <div class="right_four">
            <div class="wt_600" style="flex:1;">{{'more_info' | translate}}</div>
            <div class="four_content">
              <div>{{'qrcode_id' | translate}}：{{LoginForm['no']}}</div>
              <div>{{'software_version' | translate}}：{{currentOptions['00']}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <a (click)="sendOrder(1, '10', '')">{{resetTitle | translate}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="readParams()">{{getParamTitle | translate}}</a>
      </div>
    </div>
  </div>
</nz-spin>